{% extends "base.html" %}

{% block  head %}
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="{{url_for('static', filename='css/style.css')}}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block js_files %}

  <script src="{{url_for('static',filename='js/helpers.js')}}"></script>

  <!-- backbone application -->
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="{{url_for("static", filename="js/projector.js")}}"></script>
  <script src="{{url_for("static", filename="js/libs/jquery.mousewheel.js")}}"></script>
  <script src="{{url_for("static", filename="js/libs/jquery.scrollpane.js")}}"></script>
  <!--<script src="{{url_for("static", filename="js/libs/ahpi.imgload.js")}}"></script>-->
  <script src="{{url_for("static", filename="js/libs/pretty.js")}}"></script> <!-- for dates -->

  <!-- pixel operations library -->
  <script type="text/javascript" src="{{url_for("static", filename="js/pixel_ops.js")}}"></script>

  <!-- polygon simplfier -->
  <script src="{{url_for("static", filename="js/libs/douglaspeuker.js")}}"></script>

  <!-- kml utils -->
  <script src="{{url_for("static", filename="js/kml.js")}}"></script>

  <!-- projection helper -->
  <script src="{{url_for('static',filename='js/models/mapper.js')}}"></script>
   
  <!-- error dialog -->
  <script src="{{url_for('static',filename='js/controllers/error.js')}}"></script>
  <!-- report -->
  <script src="{{url_for("static", filename="js/models/report.js")}}"></script>

  <!-- map layers -->
  <script src="{{url_for("static", filename="js/controllers/draw_tool.js")}}"></script>
  <script src="{{url_for("static", filename="js/models/layers.js")}}"></script>
  <script src="{{url_for("static", filename="js/controllers/layers.js")}}"></script>
  <script src="{{url_for("static", filename="js/canvas_tile_layer.js")}}"></script>
  <script src="{{url_for('static',filename='js/models/map_layer.js')}}"></script>
  <script src="{{url_for('static',filename='js/controllers/map_layer.js')}}"></script>

  <!-- map -->
  <script src="{{url_for('static',filename='js/controllers/map.js')}}"></script>

  <!-- polygon -->
  <script src="{{url_for('static',filename='js/models/polygon.js')}}"></script>
  <script src="{{url_for('static',filename='js/controllers/polygon.js')}}"></script>

  <!-- grid -->
  <script src="{{url_for('static',filename='js/models/grid.js')}}"></script>
  <script src="{{url_for('static',filename='js/controllers/grid.js')}}"></script>

  <!-- toolbar -->
  <script src="{{url_for('static',filename='js/controllers/toolbar.js')}}"></script>
  
  <!-- notes -->
  <script src="{{url_for('static',filename='js/models/notes.js')}}"></script>
  <script src="{{url_for('static',filename='js/controllers/notes.js')}}"></script>

  <!-- user -->
  <script src="{{url_for('static',filename='js/models/user.js')}}"></script>

  <!-- loading -->
  <script src="{{url_for('static',filename='js/controllers/loader.js')}}"></script>

  <!-- app -->
  <script src="{{url_for('static',filename='js/app.js')}}"></script>

{% endblock %}

{% block js %}
    function initial_data() {
        window.app.user = new User({{user.as_json()|safe}});
        window.app.reports.reset({{reports_json|safe}});
        console.log("=== Initial data loaded == ");
        var available_maps = [
            {
              id: '2',
              type: 'fusion_tables',
              table: '304837',
              select: 'geometry',
              description: 'Brazil Municipalities Public'
            },
            {
              id: '3',
              type: 'fusion_tables',
              table: '304268',
              select: 'geometry',
              description: 'Brazil States Public'
            },
            {
              id: '4',
              type: 'fusion_tables',
              table: '322554',
              select: 'geometry',
              description: 'Brazil Federal Conservation Unit Public'
            },
            {
              id: '5',
              type: 'fusion_tables',
              table: '322660',
              select: 'geometry',
              description: 'Brazil State Conservation Unit Public'
            }

        ];
        {% for m in maps %}
           available_maps.splice(0, 0, {
              id: '{{m.data.mapid}}',
              type: 'xyz',
              description: '{{m.info}}',
              url: 'http://earthengine.googleapis.com/map/{{m.data.mapid}}/{Z}/{X}/{Y}?token={{m.data.token}}'
        
            });
        {% endfor %}
        // this layer must be the first
        available_maps.splice(0, 0,
            {
              id: '1',
              type: 'fusion_tables',
              table: '1205151',
              select: 'geometry',
              description: 'Brazil Legal Amazon'
            }
        );

        window.app.available_layers.reset(available_maps);

    }
    $(document).ready(function() {
        initial_data();
    });
{% endblock %}

{% block body %}


    {% include "_header.html" %}
    <div id="workarea">

        <div class="map_container" id="main_map">
            <div class="map"></div>
            <!-- zoom-control -->
            <div class="zoom_control">
              <a href="#zoom_in" class="zoom_in">zoom_in</a>
              <a href="#zoom_out" class="zoom_out">zoom_out</a>
            </div>
            <!-- end zoom control -->
            <div class="layer_editor"><img src="/static/img/layers_editor.png"></img></div>
        </div>

        {% include "_layout_1.html" %}
        {% include "_layout_half.html" %}

        <div id="grid"></div>

        <div id="loading">
            <span class="loader">
               <h1>preparing workspace</h1>
               <p>Loading cells...</p>
               <img src="/static/img/loading.gif"/>
            </span>
        </div>

        <div id="loading_small">
           <span class="loader">
              <img src="/static/img/ajax-loader-small.gif"/>
              <p>performing operation</p>
           </span>
        </div>

        <div id="error_dialog">
            <span class="error_desc">
               <h1>There has been a problem</h1>
               <p id="error_text">
                    Some problem has occurred sorry.
                </p>
               <button id="ok">ok</button>
               <!--<a id="cancel" href="#cancel">cancel</a>-->
            </span>
        </div>
    </div>

   {% include "_notes.html" %}

   <script type="text/template" id="layer-editor">
        <div id="layer_editor_dialog" class="hidden">
            <ul>
            </ul>
        </div>
   </script>
   <script type="text/template" id="cell-template">
      <div class="cell_wrapper_info">
        <span class="arrow"></span>
        <div class="content">
            <p>
                <%
                    if(z === 1) {
                        print(children_done + "/100 - ");
                    } else {
                        print(polygon_count + " polygons");
                    }
                %>
                <span class="date">
                <%
                    var month_names_short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    if(latest_change !== 0) {
                        var d = new Date(latest_change);
                        print(month_names_short[d.getMonth()] + ' ' + d.getUTCDate() + ' ' + d.getUTCFullYear());
                    }
                %>
                </span>
            </p>
            <h3><% 
                    print(added_by.split('@')[0]);
            %></h3>
        </div>
      </div>
    </script>

{% endblock %}
